<template>
	<div class="activeCheckbox">
		<div class="checkbox1">
			<h3>基础用法</h3>
			<el-checkbox v-model="checked1">备选框</el-checkbox>
		</div>
		<div class="checkbox2">
			<h3>禁用状态</h3>
			<el-checkbox v-model="checked2" disabled>备选框</el-checkbox>
		</div>
		<div class="checkbox3">
			<h3>多选框组</h3>
			<el-checkbox-group v-model="checkList">
				<el-checkbox label="复选框A"></el-checkbox>
				<el-checkbox label="复选框B"></el-checkbox>
				<el-checkbox label="复选框C"></el-checkbox>
				<el-checkbox label="复选框D"></el-checkbox>
				<el-checkbox label="禁用" disabled></el-checkbox>
				<el-checkbox label="选中且禁用" disabled></el-checkbox>
			</el-checkbox-group>
		</div>
		<div class="checkbox4">
			<h3>indeterminate 状态(实现全选)</h3>
			<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
			<div style="margin: 15px 0;"></div>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>
		</div>
		<div class="checkbox5">
			<h3>可选项目数量的限制</h3>
			<el-checkbox-group v-model="checkedCities1" :min="1" :max="3">
				<el-checkbox v-for="city in cities1" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>
		</div>
	</div>
</template>

<script>
	const cityOptions = ['北京', '上海', '天津']
	const cityOptions1 = ['北京', '上海', '天津', '济南', '河北']
	export default {
		data() {
			return {
				checked1: true,
				checked2: true,
				checkList: ['复选框A', '选中且禁用'],
				checkAll: false,
				checkedCities: ['上海', '北京'],
				cities: cityOptions,
				isIndeterminate: true,
				checkedCities1: ['上海', '北京','济南'],
				cities1: cityOptions1
			}
		},
		methods: {
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			}
		}
	}
</script>

<style>

</style>